import FullScreenModal from '@/components/Common/fullScreen';
import { FieldModel, FiledLookup } from '@/ts/base/model';
import { TabPanel, TreeList } from 'devextreme-react';
import { Column } from 'devextreme-react/cjs/tree-list';
import React, { useState } from 'react';

interface IProps {
  tagsValue: FiledLookup[];
  speciesFields: FieldModel[];
  onOk: (value: FiledLookup[]) => void;
  onCancel: () => void;
}

/** 标签选择器 */
const LabelsSelect: React.FC<IProps> = (props) => {
  const [selected, setSelected] = useState(props.tagsValue);
  const RenderFieldLabels = ({ speciesField }: { speciesField: FieldModel }) => {
    return (
      <div style={{ padding: '10px 0' }}>
        <RenderLabels
          data={speciesField.lookups ?? []}
          selectMode="multiple"
          height={'calc(70vh - 100px)'}
        />
      </div>
    );
  };

  const loadVaildSelect = () => {
    return selected
      .filter((i) => selected.every((v) => v.id != i.parentId))
      .map((i) => {
        return { ...i, parentId: undefined };
      });
  };

  const RenderLabels = ({
    data,
    height,
    selectMode,
  }: {
    data: FiledLookup[];
    height: number | string;
    selectMode: 'single' | 'multiple' | 'none';
  }) => {
    return (
      <TreeList
        keyExpr="id"
        autoExpandAll
        height={height}
        showRowLines={true}
        showBorders={true}
        columnAutoWidth={true}
        parentIdExpr="parentId"
        selection={{
          mode: selectMode,
          allowSelectAll: false,
        }}
        toolbar={{
          visible: true,
          items: [
            {
              name: 'searchPanel',
              location: 'before',
            },
          ],
        }}
        selectedRowKeys={selected
          .filter((i) => data.some((a) => a.id == i.id))
          .map((i) => i.id)}
        searchPanel={{ visible: true, width: 500 }}
        dataSource={data}
        onSelectionChanged={(e) => {
          setSelected((before) => {
            var after = before.filter((i) => !e.currentDeselectedRowKeys.includes(i.id));
            after.push(
              ...e.selectedRowsData.filter((i) =>
                e.currentSelectedRowKeys.includes(i.id),
              ),
            );
            return after;
          });
        }}>
        <Column dataField="text" caption="名称" width={350} />
        <Column dataField="value" caption="值" width={220} />
      </TreeList>
    );
  };
  return (
    <FullScreenModal
      open
      hideMaxed
      title={'请选择分类标签'}
      onCancel={props.onCancel}
      destroyOnClose
      width={1200}
      onSave={() => props.onOk(loadVaildSelect())}
      bodyHeight={'70vh'}>
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'row',
          padding: 10,
          gap: 10,
        }}>
        <div style={{ width: 0, flex: 1, overflow: 'auto' }}>
          <TabPanel
            width="100%"
            height={'100%'}
            animationEnabled={true}
            swipeEnabled={true}
            dataSource={props.speciesFields}
            tabsPosition="top"
            stylingMode="secondary"
            itemComponent={({ data }: { data: FieldModel }) => {
              return <RenderFieldLabels key={data.id} speciesField={data} />;
            }}
            itemTitleTemplate={(data) => {
              return data.name;
            }}
          />
        </div>
        <div style={{ width: 0, flex: 1, overflow: 'auto' }}>
          <RenderLabels
            data={loadVaildSelect()}
            selectMode="multiple"
            height={'calc(70vh - 35px)'}
          />
        </div>
      </div>
    </FullScreenModal>
  );
};

export default LabelsSelect;
